<template>
	<view class="container">
		<view class="userInfo">
			<view class="user-head">
				<image :src="userVO.head"></image>
			</view>
			<view class="user-text">
				<view style="font-weight: bold;">{{userVO.nickName}}</view>
				<view style="font-size: 10px; color: #cdcdcd;">{{userVO.area || "未知地区"}}</view>
			</view>
			<view class="edit" @click="clickButton">{{buttonText}}</view>
		</view>
		<view class="count">
			<view>
				<view style="font-weight: bold; text-align: center;">123</view>
				<view style="font-size: 10px; text-align: center;">收藏</view>
			</view>
			<view>
				<view style="font-weight: bold;text-align: center;">456</view>
				<view style="font-size: 10px;text-align: center;text-align: center;text-align: center;">粉丝</view>
			</view>
			<view>
				<view style="font-weight: bold;text-align: center;text-align: center;">456</view>
				<view style="font-size: 10px;text-align: center;">关注</view>
			</view>
		</view>

		<view class="user-home-thing" @click="onClickItem(0)">
			<image src="../../static/image/爱心.png"></image>
			<text>点赞</text>
		</view>
		<view class="user-home-thing" @click="onClickItem(1)">
			<image src="../../static/image/礼物.png"></image>
			<text>收藏</text>
		</view>
		<view class="user-home-thing" @click="clickSetting">
			<image src="../../static/image/设置.png"></image>
			<text>设置</text>
		</view>
	</view>
</template>

<script>
	const emptyUserVO = {
		id: 0,
		userName: '',
		nickName: '点击登录',
		phone: '',
		head: 'http://ryzzj0o9e.hn-bkt.clouddn.com/default_head/%E6%9F%AF%E5%9F%BA.png',
		sex: 0,
		area: '养宠生活好帮手~',
		createTime: '',
		latestTime: '',
		status: 0
	};
	export default {
		data() {
			return {
				userVO: emptyUserVO,
				buttonText: '登录'
			};
		},

		methods: {
			onClickItem(index) {
				switch (index) {
					case 0:
						uni.navigateTo({
							url: "/pages/like_collect/index?index=" + index
						})
						break;
					case 1:
						uni.navigateTo({
							url: "/pages/like_collect/index?index=" + index
						})
						break;
					default:
						console.log("error")
				}
			},
			clickButton() {

				uni.getStorage({
					key: 'userVO',
					success: () => {
						uni.navigateTo({
							url: "/pages/my_information/index?userId=" + this.userVO.id
						})
					},
					fail: () => {
						uni.navigateTo({
							url: "/pages/login/index"
						})
					}
				});

			},
			clickSetting() {
				uni.navigateTo({
					url: "/pages/my_setting/index"
				})
			},
			clearCache() {
				this.userVO = emptyUserVO;
			}
		},
		onShow() {
			uni.getStorage({
				key: 'userVO',
				success: (res) => {
					this.userVO = res.data;
					this.buttonText = "编辑";
				},
				fail: () => {
					this.userVO = emptyUserVO
					this.buttonText = "登录";
				}
			});
		}
	};
</script>

<style>
	.container {
		height: 100%;
	}

	.userInfo {
		height: 20%;
		width: 100%;
		display: flex;
		padding-left: 25px;
		padding-top: 10px;
	}

	.user-head {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		overflow: hidden;
	}

	.user-head>image {
		width: 50px;
		height: 50px;
	}

	.user-text {
		margin-left: 15px;
		font-size: 15px;
	}

	.user-text>view {
		margin-top: 3px;
	}

	.edit {
		height: 25px;
		width: 65px;
		background-color: #ffd524;
		border-radius: 10px;
		line-height: 25px;
		text-align: center;
		font-size: 10px;
		position: absolute;
		right: 25px;
		margin-top: 9px;
	}

	.count {
		width: 60%;
		display: flex;
		justify-content: space-between;
		height: 50px;
		margin: 15px auto 15px auto;
	}

	.user-home-thing {
		height: 60px;
		line-height: 25px;
		margin-left: 25px;
		font-size: 15px;
		position: relative;
	}

	.user-home-thing::after {
		content: '';
		background-image: url('/static/image/向右.png');
		background-size: 12px;
		width: 12px;
		height: 12px;
		font-family: monospace;
		font-weight: bold;
		position: absolute;
		right: 30px;
		top: 21px;
	}

	.user-home-thing>image {
		position: absolute;
		top: 20%;
		width: 36px;
		height: 36px;
	}

	.user-home-thing>text {
		position: absolute;
		top: 28%;
		margin-left: 50px;
		font-weight: bold;
	}
</style>